<template>
  <a-select
    :value="value ? value : undefined"
    :default-value="value"
    :placeholder="placeholderLanguageText"
    :disabled="disabled"
    :showSearch="showSearch"
    :size="size"
    :mode="mode"
    :style="isWidth ? 'width:100%' : 'min-width:120px'"
    :filter-option="filter"
    @change="handleChange"
    @dropdownVisibleChange="handleOpen"
    :getPopupContainer="getPopupContainer"
    :dropdownStyle="dropdownStyle"
    :dropdownMenuStyle="dropdownMenuStyle"
  >
    <div slot="suffixIcon" class="arrow_icon">{{ open ? '' : '' }}</div>
    <slot>
      <d-select-option
        v-for="item in options"
        :key="item.value"
        :value="item.value"
        :disabled="!!item.disabled"
      >
        <span class="tw-select-small-value_text">
          {{ item.label }}
        </span>
      </d-select-option>
    </slot>
  </a-select>
</template>

<script>
/**
 * @interface props
 *    @optionType 设计图样式 基本为文本类型: text,带有图标的value: record,自动化选择:auto
 *    @options {
 *       label: 显示的文本
 *       value: 修改值
 *       icon: 自动化显示icon图片
 *     }
 *    @param options 选项卡 内容
 *    @param disabled String 是否禁用
 *
 * @method change
 *    change = (e:Boolean,params:any)=>void // 触发回调 e 参数 value
 * @slot content
 */
import zhCN from '../locale/zh-cn';

export default {
  name: 'DSelect',
  model: {
    prop: 'value',
    event: 'update:value'
  },
  props: {
    value: {
      type: [String, Array]
    },
    filter: {
      type: Function,
      default: () => true
    },
    textLeft: {
      type: String,
      default: '20px'
    },
    isWidth: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String
    },
    showSearch: {
      type: Boolean,
      default: false
    },
    options: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    getPopupContainer: {
      type: Function
    },
    dropdownStyle: {
      type: Object,
      default: () => ({})
    },
    dropdownMenuStyle: {
      type: Object,
      default: () => ({})
    },
    size: {
      type: String,
      default: 'small'
    },
    mode: {
      type: String,
      default: 'default'
    }
  },
  inject: {
    dLocaleData: {
      default: zhCN.locale
    }
  },
  computed: {
    placeholderLanguageText() {
      if (this.placeholder) {
        return this.placeholder;
      }
      return this.dLocaleData.select.placeholder;
    }
  },
  data() {
    return {
      open: false
    };
  },
  methods: {
    handleOpen(e) {
      this.open = e;
    },
    handleChange(value) {
      if (value !== null) {
        this.$emit('change', value);
        this.$emit('update:value', value);
      }
    }
  }
};
</script>

<style lang="scss">
.tw-select-selection-selected-value {
  height: 100%;
  width: 100%;
}
.tw-select-selection__placeholder {
  font-size: 12px !important;
}
.tw-select-dropdown-menu-item {
  height: 28px;
  display: flex;
  align-items: center;
}
.tw-select-dropdown--empty {
  .tw-select-dropdown-menu-item {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.tw-select-selection {
  border-radius: 0px !important;
}
.tw-select-selection__rendered {
  margin-right: 23px;
}

.tw-select {
  font-size: 12px;
}
</style>
<style lang="scss" scoped>
@font-face {
  font-family: 'arrow_icon';
  src: url('data:font/truetype;charset=utf-8;base64,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')
    format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.arrow_icon {
  font-family: 'arrow_icon' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 28px;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #ccc;
  font-size: 18px;
  position: absolute;
  top: -7px;
  right: -7px;
}
.tw-select-small-value_text {
  line-height: 26px;
  font-size: 12px;
}
</style>
